<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>舞动健康 - 空间</title>
    <!-- 引入Tailwind CSS -->
    <script src="https://cdn.tailwindcss.com"></script>
    <!-- 引入FontAwesome -->
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.3.0/css/all.min.css">
    <script>
        tailwind.config = {
            theme: {
                extend: {
                    colors: {
                        primary: {
                            light: '#ff7eb3',
                            DEFAULT: '#d44bdf',
                            dark: '#a742df',
                        }
                    },
                    fontFamily: {
                        sans: ['-apple-system', 'BlinkMacSystemFont', 'Segoe UI', 'PingFang SC', 'Hiragino Sans GB', 'Microsoft YaHei', 'Helvetica Neue', 'Helvetica', 'Arial', 'sans-serif']
                    },
                }
            }
        }
    </script>
    <style>
        .gradient-bg {
            background: linear-gradient(135deg, #a742df 0%, #ff7eb3 100%);
        }
        
        .gradient-text {
            background: linear-gradient(135deg, #a742df 0%, #ff7eb3 100%);
            -webkit-background-clip: text;
            -webkit-text-fill-color: transparent;
        }
        
        .no-scrollbar::-webkit-scrollbar {
            display: none;
        }
        
        .no-scrollbar {
            -ms-overflow-style: none;
            scrollbar-width: none;
        }
    </style>
</head>
<body class="font-sans bg-gray-50 text-gray-800 max-w-md mx-auto min-h-screen">
    <!-- 顶部导航 -->
    <header class="fixed top-0 left-0 right-0 z-20 max-w-md mx-auto">
        <div class="gradient-bg px-4 py-3 text-white shadow-lg">
            <div class="flex items-center">
                <button class="w-8 h-8 flex items-center justify-center" onclick="window.history.back()">
                    <i class="fa-solid fa-arrow-left"></i>
                </button>
                <div class="ml-3 flex-1 text-lg font-medium">找场地</div>
            </div>
            
            <!-- 搜索框 -->
            <div class="relative mt-3">
                <div class="flex items-center bg-white bg-opacity-30 rounded-full py-2 px-4">
                    <i class="fa-solid fa-magnifying-glass mr-2 text-white opacity-80"></i>
                    <input type="text" placeholder="搜索场地名称、类型、位置..." class="bg-transparent w-full text-sm placeholder-white placeholder-opacity-80 focus:outline-none">
                </div>
            </div>
        </div>
        
        <!-- 筛选栏 -->
        <div class="bg-white shadow-sm py-2.5 border-b border-gray-100">
            <div class="flex justify-between px-4 overflow-x-auto no-scrollbar">
                <div class="flex items-center px-2 py-1 whitespace-nowrap">
                    <span class="text-sm">综合排序</span>
                    <i class="fa-solid fa-chevron-down text-xs ml-1.5 text-gray-500"></i>
                </div>
                <div class="flex items-center px-2 py-1 whitespace-nowrap">
                    <span class="text-sm">场地类型</span>
                    <i class="fa-solid fa-chevron-down text-xs ml-1.5 text-gray-500"></i>
                </div>
                <div class="flex items-center px-2 py-1 whitespace-nowrap">
                    <span class="text-sm">价格区间</span>
                    <i class="fa-solid fa-chevron-down text-xs ml-1.5 text-gray-500"></i>
                </div>
                <div class="flex items-center px-2 py-1 whitespace-nowrap">
                    <span class="text-sm">筛选</span>
                    <i class="fa-solid fa-sliders text-xs ml-1.5 text-gray-500"></i>
                </div>
            </div>
        </div>
    </header>
    
    <!-- 页面内容区 -->
    <main class="pt-28 pb-16 px-4">
        <!-- 场地列表 -->
        <div class="space-y-4">
            <!-- 场地卡片 1 -->
            <div class="bg-white rounded-xl shadow-sm overflow-hidden" onclick="window.location.href='venue_detail.html'">
                <div class="relative">
                    <img src="https://images.unsplash.com/photo-1545205597-3d9d02c29597?q=80&w=500&auto=format&fit=crop" 
                         alt="场地图片" class="w-full h-48 object-cover">
                    <div class="absolute top-3 left-3 bg-primary-dark bg-opacity-80 text-white text-xs px-2 py-1 rounded-full">
                        4.9 <i class="fa-solid fa-star text-yellow-300 ml-0.5"></i>
                    </div>
                </div>
                <div class="p-4">
                    <div class="flex justify-between items-center mb-2">
                        <h3 class="font-medium text-lg">和谐瑜伽馆</h3>
                        <span class="text-primary-dark text-sm font-medium">¥150/h起</span>
                    </div>
                    <p class="text-xs text-gray-500 mb-2">瑜伽 | 健身 | 舞蹈</p>
                    <div class="flex flex-wrap mb-3">
                        <span class="text-xs bg-pink-50 text-primary-light px-2 py-0.5 rounded-full mr-1 mb-1">免费WiFi</span>
                        <span class="text-xs bg-pink-50 text-primary-light px-2 py-0.5 rounded-full mr-1 mb-1">更衣室</span>
                        <span class="text-xs bg-pink-50 text-primary-light px-2 py-0.5 rounded-full mr-1 mb-1">淋浴间</span>
                        <span class="text-xs bg-pink-50 text-primary-light px-2 py-0.5 rounded-full mr-1 mb-1">停车场</span>
                    </div>
                    <div class="flex items-center text-xs text-gray-500">
                        <i class="fa-solid fa-location-dot mr-1"></i>
                        <span>朝阳区望京SOHO T1 · 1.2km</span>
                    </div>
                </div>
            </div>
            
            <!-- 场地卡片 2 -->
            <div class="bg-white rounded-xl shadow-sm overflow-hidden" onclick="window.location.href='venue_detail.html'">
                <div class="relative">
                    <img src="https://images.unsplash.com/photo-1571902943202-507ec2618e8f?q=80&w=500&auto=format&fit=crop" 
                         alt="场地图片" class="w-full h-48 object-cover">
                    <div class="absolute top-3 left-3 bg-primary-dark bg-opacity-80 text-white text-xs px-2 py-1 rounded-full">
                        4.8 <i class="fa-solid fa-star text-yellow-300 ml-0.5"></i>
                    </div>
                </div>
                <div class="p-4">
                    <div class="flex justify-between items-center mb-2">
                        <h3 class="font-medium text-lg">活力健身中心</h3>
                        <span class="text-primary-dark text-sm font-medium">¥200/h起</span>
                    </div>
                    <p class="text-xs text-gray-500 mb-2">健身 | 有氧 | 力量</p>
                    <div class="flex flex-wrap mb-3">
                        <span class="text-xs bg-pink-50 text-primary-light px-2 py-0.5 rounded-full mr-1 mb-1">专业器材</span>
                        <span class="text-xs bg-pink-50 text-primary-light px-2 py-0.5 rounded-full mr-1 mb-1">私教区</span>
                        <span class="text-xs bg-pink-50 text-primary-light px-2 py-0.5 rounded-full mr-1 mb-1">桑拿房</span>
                        <span class="text-xs bg-pink-50 text-primary-light px-2 py-0.5 rounded-full mr-1 mb-1">24小时</span>
                    </div>
                    <div class="flex items-center text-xs text-gray-500">
                        <i class="fa-solid fa-location-dot mr-1"></i>
                        <span>海淀区中关村创业大厦 · 3.5km</span>
                    </div>
                </div>
            </div>
            
            <!-- 场地卡片 3 -->
            <div class="bg-white rounded-xl shadow-sm overflow-hidden" onclick="window.location.href='venue_detail.html'">
                <div class="relative">
                    <img src="https://images.unsplash.com/photo-1518611012118-696072aa579a?q=80&w=500&auto=format&fit=crop" 
                         alt="场地图片" class="w-full h-48 object-cover">
                    <div class="absolute top-3 left-3 bg-primary-dark bg-opacity-80 text-white text-xs px-2 py-1 rounded-full">
                        5.0 <i class="fa-solid fa-star text-yellow-300 ml-0.5"></i>
                    </div>
                </div>
                <div class="p-4">
                    <div class="flex justify-between items-center mb-2">
                        <h3 class="font-medium text-lg">舞动人生工作室</h3>
                        <span class="text-primary-dark text-sm font-medium">¥180/h起</span>
                    </div>
                    <p class="text-xs text-gray-500 mb-2">舞蹈 | 拉丁 | 芭蕾</p>
                    <div class="flex flex-wrap mb-3">
                        <span class="text-xs bg-pink-50 text-primary-light px-2 py-0.5 rounded-full mr-1 mb-1">专业地板</span>
                        <span class="text-xs bg-pink-50 text-primary-light px-2 py-0.5 rounded-full mr-1 mb-1">全墙镜</span>
                        <span class="text-xs bg-pink-50 text-primary-light px-2 py-0.5 rounded-full mr-1 mb-1">音响设备</span>
                        <span class="text-xs bg-pink-50 text-primary-light px-2 py-0.5 rounded-full mr-1 mb-1">休息区</span>
                    </div>
                    <div class="flex items-center text-xs text-gray-500">
                        <i class="fa-solid fa-location-dot mr-1"></i>
                        <span>西城区金融街 · 5.2km</span>
                    </div>
                </div>
            </div>
            
            <!-- 场地卡片 4 -->
            <div class="bg-white rounded-xl shadow-sm overflow-hidden" onclick="window.location.href='venue_detail.html'">
                <div class="relative">
                    <img src="https://images.unsplash.com/photo-1591343395082-e120087004b4?q=80&w=500&auto=format&fit=crop" 
                         alt="场地图片" class="w-full h-48 object-cover">
                    <div class="absolute top-3 left-3 bg-primary-dark bg-opacity-80 text-white text-xs px-2 py-1 rounded-full">
                        4.7 <i class="fa-solid fa-star text-yellow-300 ml-0.5"></i>
                    </div>
                </div>
                <div class="p-4">
                    <div class="flex justify-between items-center mb-2">
                        <h3 class="font-medium text-lg">静心疗愈空间</h3>
                        <span class="text-primary-dark text-sm font-medium">¥220/h起</span>
                    </div>
                    <p class="text-xs text-gray-500 mb-2">疗愈 | 冥想 | 声波</p>
                    <div class="flex flex-wrap mb-3">
                        <span class="text-xs bg-pink-50 text-primary-light px-2 py-0.5 rounded-full mr-1 mb-1">隔音效果</span>
                        <span class="text-xs bg-pink-50 text-primary-light px-2 py-0.5 rounded-full mr-1 mb-1">专业音响</span>
                        <span class="text-xs bg-pink-50 text-primary-light px-2 py-0.5 rounded-full mr-1 mb-1">冥想垫</span>
                        <span class="text-xs bg-pink-50 text-primary-light px-2 py-0.5 rounded-full mr-1 mb-1">香薰</span>
                    </div>
                    <div class="flex items-center text-xs text-gray-500">
                        <i class="fa-solid fa-location-dot mr-1"></i>
                        <span>朝阳区三里屯 · 2.8km</span>
                    </div>
                </div>
            </div>
            
            <!-- 场地卡片 5 -->
            <div class="bg-white rounded-xl shadow-sm overflow-hidden" onclick="window.location.href='venue_detail.html'">
                <div class="relative">
                    <img src="https://images.unsplash.com/photo-1570829053985-56e661df1ca2?q=80&w=500&auto=format&fit=crop" 
                         alt="场地图片" class="w-full h-48 object-cover">
                    <div class="absolute top-3 left-3 bg-primary-dark bg-opacity-80 text-white text-xs px-2 py-1 rounded-full">
                        4.9 <i class="fa-solid fa-star text-yellow-300 ml-0.5"></i>
                    </div>
                </div>
                <div class="p-4">
                    <div class="flex justify-between items-center mb-2">
                        <h3 class="font-medium text-lg">高尔夫训练中心</h3>
                        <span class="text-primary-dark text-sm font-medium">¥350/h起</span>
                    </div>
                    <p class="text-xs text-gray-500 mb-2">高尔夫 | 模拟器 | 推杆</p>
                    <div class="flex flex-wrap mb-3">
                        <span class="text-xs bg-pink-50 text-primary-light px-2 py-0.5 rounded-full mr-1 mb-1">专业设备</span>
                        <span class="text-xs bg-pink-50 text-primary-light px-2 py-0.5 rounded-full mr-1 mb-1">模拟场景</span>
                        <span class="text-xs bg-pink-50 text-primary-light px-2 py-0.5 rounded-full mr-1 mb-1">推杆区</span>
                        <span class="text-xs bg-pink-50 text-primary-light px-2 py-0.5 rounded-full mr-1 mb-1">休息区</span>
                    </div>
                    <div class="flex items-center text-xs text-gray-500">
                        <i class="fa-solid fa-location-dot mr-1"></i>
                        <span>顺义区国际高尔夫俱乐部 · 15.7km</span>
                    </div>
                </div>
            </div>
        </div>
    </main>
    
    <!-- 底部导航 -->
    <nav class="fixed bottom-0 left-0 right-0 bg-white border-t border-gray-200 py-1.5 z-20 max-w-md mx-auto">
        <div class="flex justify-around items-center">
            <a href="index.html" class="flex flex-col items-center w-1/5 text-gray-500">
                <i class="fa-solid fa-house text-xl mb-0.5"></i>
                <span class="text-xs">首页</span>
            </a>
            <a href="coach.html" class="flex flex-col items-center w-1/5 text-gray-500">
                <i class="fa-solid fa-user-tie text-xl mb-0.5"></i>
                <span class="text-xs">教练</span>
            </a>
            <a href="#" class="flex flex-col items-center w-1/5 text-primary-dark">
                <i class="fa-solid fa-building text-xl mb-0.5"></i>
                <span class="text-xs font-medium">空间</span>
            </a>
            <a href="service.html" class="flex flex-col items-center w-1/5 text-gray-500">
                <i class="fa-solid fa-clipboard-list text-xl mb-0.5"></i>
                <span class="text-xs">服务</span>
            </a>
            <a href="my.html" class="flex flex-col items-center w-1/5 text-gray-500">
                <i class="fa-solid fa-user text-xl mb-0.5"></i>
                <span class="text-xs">我的</span>
            </a>
        </div>
    </nav>
</body>
</html> 